<template>
  <view :class="['result-container', levelClass]">
    <view class="header">
      <view class="status">您现在属于中风</view>
      <view class="level">{{ result.level }}</view>
    </view>

    <view class="result-row">
      <view class="label">未来五年中风的几率</view>
      <view class="value">{{ result.probability5 }}<text class="unit">%</text></view>
      <view class="subtext">比同龄同性别健康者高出</view>
      <view class="value">{{ result.times5 }}<text class="unit">倍</text></view>
    </view>

    <view class="result-row">
      <view class="label">未来十年中风的几率</view>
      <view class="value">{{ result.probability10 }}<text class="unit">%</text></view>
      <view class="subtext">比同龄同性别健康者高出</view>
      <view class="value">{{ result.times10 }}<text class="unit">倍</text></view>
    </view>
	
	<view class="result-row">
	    <view class="label">引发您患中风疾病的危险因素有：</view>
	    <view class="value">{{ result.remark }}</view>
	</view>
  </view>
  
</template>

<script>
import { getQrResultDetail } from '@/common/api.js' // 替换为你真实的 API 路径

export default {
  data() {
    return {
      result: {
        level: '',
        probability5: '',
        times5: '',
        probability10: '',
        times10: '',
		remark: ''
      }
    }
  },
  computed: {
    levelClass() {
      switch (this.result.level) {
        case '低危人群': return 'low';
        case '中危人群': return 'medium';
        case '高危人群': return 'high';
        case '极高危人群': return 'very-high';
        default: return '';
      }
    }
  },
  onLoad(options) {
    const id = options.id;
    this.fetchResult(id);
  },
  methods: {
    async fetchResult(id) {
      try {
        const res = await getQrResultDetail(id);
        this.result = res.data;
		console.log('Qr问卷详细信息', this.result)
      } catch (error) {
        uni.showToast({ title: '加载失败', icon: 'none' });
      }
    }
  }
}
</script>

<style lang="scss" scoped>
.result-container {
  padding: 40rpx;
  color: #fff;
  min-height: 100vh;
  box-sizing: border-box;

  .header {
    text-align: center;
    margin-bottom: 50rpx;

    .status {
      font-size: 28rpx;
      margin-bottom: 10rpx;
    }

    .level {
      font-size: 60rpx;
      font-weight: bold;
    }
  }

  .result-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    margin-bottom: 40rpx;
    background-color: rgba(255, 255, 255, 0.15);
    padding: 20rpx;
    border-radius: 20rpx;

    .label, .subtext {
      width: 100%;
      font-size: 28rpx;
      margin-bottom: 10rpx;
    }

    .value {
      font-size: 60rpx;
      font-weight: bold;
    }

    .unit {
      font-size: 26rpx;
      margin-left: 6rpx;
    }
  }
}

/* 背景色等级 */
.low {
  background-color: #2ebf6b; // 绿色
}
.medium {
  background-color: #ffa726; // 橙色
}
.high {
  background-color: #ef5350; // 红色
}
.very-high {
  background-color: #b71c1c; // 深红
}
</style>
